<template>
        <view>
                <view class="inv-h-w">
                        <view :class="['inv-h',Inv==0?'inv-h-se':'']" @click="Inv=0">选项卡1</view>
                        <view :class="['inv-h',Inv==1?'inv-h-se':'']" @click="Inv=1">我是选项卡二</view>
                </view>
                <view class="" v-show="Inv == 0">
                        <scroll-view
                        class="sv-list"
                        scroll-y="true"
                        style="padding: 3rpx;height: 100%;width: 100%;">
                        <!-- 全部页面 -->
                        	
                        	<view class="list" style=""
                        	v-for="(item,index) in clist" 
                        	:key="index">
                        		<view class="list-box" >
                        			<view style="color:#ff0202">¥<text class="font-80">{{item.price}}</text></view>
                        			<text class="font-18" style="color:#b04b03;">{{item.tip}}</text>
                        		</view>
                        		<view class="list-box-middle" style="">
                        			<text class="font-31 m-b-10" >{{item.title}}</text>
                        			<text class="font-22" style="color: #6d6d6d;">{{item.time}}</text>
                        		</view>
                        		<button :disabled="item.disabled">{{item.text}}</button>
                        	</view>
                        
                        </scroll-view>
                        
                        		
                </view>
                <view class="" v-show="Inv == 1">
                        我是选项卡二
                </view>
        </view>
</template>
 
<script>
       export default {
       	data() {
       		return {
       			Inv: 0,
       			list1: [
       				{
       				name: '全部',
       				}, 
       				{
       				name: '未使用',
       				badge: {
       					value: 3,
       				}
       				},
       				{
       				name: '已使用'
       				}, 
       				{
       				name: '已过期'
       				}
       			],
       			clist:[
       				{
       				price:10,
       				tip:'满15元可用',
       				title:'无门槛优惠卷',
       				time:'有效期：2022.3.25-2022.3.31',
       				text:'去使用',
       				disabled:false
       			},
       			{
       				price:10,
       				tip:'满15元可用',
       				title:'无门槛优惠卷',
       				time:'有效期：2022.3.25-2022.3.31',
       				text:'已过期',
       				disabled:true
       			},
       			{
       				price:10,
       				tip:'满15元可用',
       				title:'无门槛优惠卷',
       				time:'有效期：2022.3.25-2022.3.31',
       				text:'已使用',
       				disabled:true
       			},
       			]
       		}
       	},
				
                methods: {
                        changeTab(Inv){
                                that.navIdx = Inv;
                                 
                        },
                }
        }
</script>
         
<style lang="scss" scoped>
	// page {
	// 	background-color: #f1f2f8;
	// }
        .inv-h-w{background-color: #FFFFFF;height: 100upx;display: flex;}
        .inv-h{font-size: 30upx;flex: 1;text-align: center;color: #C9C9C9;height: 100upx;line-height: 100upx;}
        .inv-h-se{color: #5BA7FF;border-bottom: 4upx solid #5BA7FF;}
        // page{background-color: #F2F2F2;}
		.sv-list{
			
			.list{
				background-color: white;
				border-radius: 10rpx;
				border: 1rpx solid white;
				display: flex;
				text-align: center;
				width: 650rpx;
				height: 182rpx;
				margin: 0 auto;
				margin-top: 33rpx;
				padding-left:22rpx;
				padding-right:22rpx;
				
				.list-box{
					display: flex;
					flex-direction: column;
					margin-top: 10rpx;
				}
				.list-box-middle{
					display: flex;
					flex-direction: column;
					text-align: left;
					margin-left: 56rpx;
					margin-top: 40rpx;
				}
				button{
					border: 2rpx solid #deaa54;
					border-radius: 50rpx;
					height:37rpx;
					color:#deaa54;
					width: 140rpx;
					margin-top:63rpx;
					color:#deaa54;
					font-size: small;
					line-height: 37rpx;
				}
			}
			
		}
		//修改uView tabs字体大小
		.u-tabs__wrapper__nav__item /deep/ .u-tabs__wrapper__nav__item__text.data-v-3b2b1a80 {
			font-size: 12px;
		}
		//修改uView tabs背景颜色
		.u-tabs__wrapper__scroll-view /deep/ .view.data-v-3b2b1a80,
		scroll-view.data-v-3b2b1a80,
		swiper-item.data-v-3b2b1a80 {
			background-color: white;
		}
		//设置页面背景颜色
	
		// 去掉button按钮的默认边框
		button::after{
			border: none;
		}
		//修改button禁用样式
		button[disabled]{
			color:black !important;
			background-color: #cfcece !important;
			border:2rpx solid #cfcece !important;
		}
</style>

